<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记住用户名</title>
</head>

<body>
    用户名:<input type="text" id="username">
    <input type="checkbox" id="remember">记住用户名

</body>
<script>
    var use = document.querySelector('#username')
    var red = document.querySelector('#remember')

    // 获取 存储的内容
    var aaa = sessionStorage.getItem('username')

    // 判断 获取的 aaa 是否存在
    if (aaa != null) {
        red.setAttribute('checked', '')
        use.value = aaa
    } else {
        red.removeAttribute('checked')
    }

    console.log(aaa);

    // 选中事件
    red.onchange = function () {
        // 判断是否选中
        if (red.checked) {
            // 存储
            sessionStorage.setItem('username', use.value)

        } else {
            // 清空
            sessionStorage.clear()
            use.value = ''
        }
    }

</script>


<!-- ####     Teacher  例子
    ####################################### -->

<!-- 案例：记住用户名
如果勾选记住用户名， 下次用户打开浏览器，就在文本框里面自动显示上次登录的用户名 -->

<!-- 用户名： <input type="text" id="username">
<input type="checkbox" id="remember">记住用户名 -->
<script>
// 把数据存起来，用到本地存储
// 关闭页面，也可以显示用户名，所以用到localStorage
//打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
// 当复选框发生改变的时候 onchange事件
// 如果勾选，就存储，否则就移除
//1. 查
// var username = document.querySelector('#username');
// var remember = document.querySelector('#remember');

// remember.onchange = function () {
// if (this.checked) {
// // 勾选 把数据存在本地
// localStorage.setItem('userName', username.value)
// } else {
// //不勾选 数据就移除
// localStorage.removeItem('userName');
// username.value = '';
// }

// }

// //下一次打开页面时，如果浏览端存的有用户名，input框里填上用户名，复选框勾选
// if (localStorage.getItem('userName')) {
// username.value = localStorage.getItem('userName');
// remember.checked = true;
// }


</script>

</html>